<template>
  <div v-if="show">
    <a-form class="layout-config" layout="horizontal">
      <a-form-item :label="$t('m.eform.appview.entity.viewName')">
        <span>{{ $locale(selectWidget.title) }}</span>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.kuan-du')" v-if="selectWidget.w === 0 || selectWidget.w > 0">
        <a-input-number v-model="selectWidget.w" :min="1" :max="24" :step="1"/>
        <a-tooltip>
          <template slot="title">
            {{ $t('m.eform.formDesign.label.she-ji-qu-yu-hua-fen-wei-24-deng-fen') }} </template>
          <ych-icon class="fm-icon-question-circle" type="question-circle"/>
        </a-tooltip>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.she-zhi-gao-du-de-fang-shi-quan-ju')">
        <a-switch :checkedChildren="$t('m.eform.formDesign.label.bai-fen-bi')" :unCheckedChildren="$t('m.eform.formDesign.label.jue-dui-zhi')" @change="onChangeHeightType"
                  v-model="data.config.percent"/>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.gao-du')" v-if="selectWidget.h">
        <a-input-number
          v-if="!data.config.percent"
          :formatter="value => `${value}px`"
          :parser="value => value.replace('px', '')"
          v-model="dataHeight"
          :min="100"
          :max="2000"
          :step="10"
          @change="changeNumber"
        />
        <a-input-number
          v-else
          :formatter="value => `${value}%`"
          :parser="value => value.replace('%', '')"
          v-model="selectWidget.h"
          :min="10"
          :max="100"
          :step="10"
        />
      </a-form-item>
      <!--固钉-->
      <a-form-item :label="$t('m.eform.formDesign.label.gu-ding')">
        <a-switch :checkedChildren="$t('m.eform.formDesign.label.qi-yong')" :unCheckedChildren="$t('m.eform.formDesign.label.bu-qi-yong')" v-model="selectWidget.affixEnable"/>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.ke-zhe-die')" v-if="selectWidget.affixEnable">
        <a-switch :checkedChildren="$t('m.eform.formDesign.label.qi-yong')" :unCheckedChildren="$t('m.eform.formDesign.label.bu-qi-yong')" v-model="selectWidget.fold"/>
      </a-form-item>

      <!--固定Tab页签-->
      <a-form-item  v-if="selectWidget.type === 'tabs'" :label="$t('m.eform.formDesign.label.gu-ding-ye-qian-dao-hang-lan')">
        <a-switch :checkedChildren="$t('m.eform.formDesign.label.qi-yong')" :unCheckedChildren="$t('m.eform.formDesign.label.bu-qi-yong')" v-model="selectWidget.affixTabs"/>
      </a-form-item>

      <a-form-item :label="$t('m.eform.formDesign.label.biao-dan-an-niu-lan')" v-if="typeof selectWidget.saveBut !== 'undefined'">
        <a-select v-model="selectWidget.saveBut">
          <a-select-option value="auto">{{ $t('m.eform.formDesign.label.zi-dong') }}</a-select-option>
          <a-select-option value="display">{{ $t('m.eform.formDesign.label.yin-cang') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.appform.entity.formStatus')" v-if="typeof selectWidget.formStatus !== 'undefined'">
        <a-select v-model="selectWidget.formStatus">
          <a-select-option value="auto">{{ $t('m.eform.formDesign.label.zi-dong') }}</a-select-option>
          <a-select-option value="editable">{{ $t('m.eform.formDesign.label.ke-bian-ji') }}</a-select-option>
          <a-select-option value="disabled">{{ $t('m.eform.formDesign.label.zhi-du') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.zhu-biao-dan')" v-if="typeof selectWidget.mainForm !== 'undefined'">
        <a-select v-model="selectWidget.mainForm">
          <a-select-option value="Y">{{ $t('m.eform.formDesign.label.zhu-biao-dan-y') }}</a-select-option>
          <a-select-option value="N">{{ $t('m.eform.formDesign.label.zhu-biao-dan-n') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.liu-cheng-biao-dan')" v-if="typeof selectWidget.flowForm !== 'undefined'">
        <a-select v-model="selectWidget.flowForm">
          <a-select-option value="Y">{{ $t('m.eform.formDesign.label.zhu-biao-dan-y') }}</a-select-option>
          <a-select-option value="N">{{ $t('m.eform.formDesign.label.zhu-biao-dan-n') }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :label="$t('m.eform.formDesign.label.xiang-ying-qi-ta-mo-xing-lian-dong')" v-if="typeof selectWidget.relationOpenFks !== 'undefined'">
        <a-select v-model="selectWidget.relationOpenFks">
          <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
          <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :label="$t('m.eform.formDesign.label.lian-dong-qi-ta-mo-xing')" v-if="typeof selectWidget.relationStatus !== 'undefined'">
        <a-select v-model="selectWidget.relationStatus">
          <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
          <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :label="$t('m.eform.formDesign.label.xian-yin-gui-ze')" v-if="typeof selectWidget.showRules !== 'undefined'">
        <a-select v-model="selectWidget.showRules">
          <a-select-option value="show">{{ $t('m.eform.formDesign.label.xian-shi-mo-ren') }}</a-select-option>
          <a-select-option value="showAfterFks">{{ $t('m.eform.formDesign.label.bao-cun-hou-xian-shi') }}</a-select-option>
        </a-select>
      </a-form-item>

    </a-form>

    <template v-if="selectWidget.type === 'tabs' && selectWidget.selectTab && currentTab">
      <a-divider>{{ $t('m.eform.formDesign.label.dang-qian-ye-qian') }}</a-divider>

      <a-form layout="horizontal">
        <a-form-item :label="$t('m.eform.formDesign.label.ye-qian-ming-cheng')">
<!--          <a-input v-model="currentTab.title"/>-->
          <locale-tag v-model="currentTab.title" :group-id="groupId"/>
        </a-form-item>

        <a-form-item :label="$t('m.eform.formDesign.label.ye-qian-cao-zuo')">
          <a-button @click="clearCurrentTab" :disabled="typeof currentTab.code === 'undefined'">{{ $t('m.eform.formDesign.label.qing-kong-dang-qian-ye-qian') }}</a-button><br/>
          <a-button @click="insertTab">{{ $t('m.eform.formDesign.label.cha-ru-ye-qian') }}</a-button><br/>
          <a-button @click="removeCurrentTab">{{ $t('m.eform.formDesign.label.shan-chu-ye-qian') }}</a-button>
        </a-form-item>

        <a-form-item :label="$t('m.eform.formDesign.label.biao-dan-an-niu-lan')" v-if="typeof currentTab.saveBut !== 'undefined'">
          <a-select v-model="currentTab.saveBut">
            <a-select-option value="auto">{{ $t('m.eform.formDesign.label.zi-dong') }}</a-select-option>
            <a-select-option value="display">{{ $t('m.eform.formDesign.label.yin-cang') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.eform.appform.entity.formStatus')" v-if="typeof currentTab.formStatus !== 'undefined'">
          <a-select v-model="currentTab.formStatus">
            <a-select-option value="auto">{{ $t('m.eform.formDesign.label.zi-dong') }}</a-select-option>
            <a-select-option value="editable">{{ $t('m.eform.formDesign.label.ke-bian-ji') }}</a-select-option>
            <a-select-option value="disabled">{{ $t('m.eform.formDesign.label.zhi-du') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.eform.formDesign.label.zhu-biao-dan')" v-if="typeof currentTab.mainForm !== 'undefined'">
          <a-select v-model="currentTab.mainForm">
            <a-select-option value="Y">{{ $t('m.eform.formDesign.label.zhu-biao-dan-y') }}</a-select-option>
            <a-select-option value="N">{{ $t('m.eform.formDesign.label.zhu-biao-dan-n') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.eform.formDesign.label.liu-cheng-biao-dan')" v-if="typeof currentTab.flowForm !== 'undefined'">
          <a-select v-model="currentTab.flowForm">
            <a-select-option value="Y">{{ $t('m.eform.formDesign.label.zhu-biao-dan-y') }}</a-select-option>
            <a-select-option value="N">{{ $t('m.eform.formDesign.label.zhu-biao-dan-n') }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="$t('m.eform.formDesign.label.xiang-ying-qi-ta-mo-xing-lian-dong')" v-if="typeof currentTab.relationOpenFks !== 'undefined'">
          <a-select v-model="currentTab.relationOpenFks">
            <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
            <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="$t('m.eform.formDesign.label.lian-dong-qi-ta-mo-xing')" v-if="typeof currentTab.relationStatus !== 'undefined'">
          <a-select v-model="currentTab.relationStatus">
            <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
            <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="$t('m.eform.formDesign.label.xian-yin-gui-ze')" v-if="typeof currentTab.showRules !== 'undefined'">
          <a-select v-model="currentTab.showRules">
            <a-select-option value="show">{{ $t('m.eform.formDesign.label.xian-shi-mo-ren') }}</a-select-option>
            <a-select-option value="showAfterFks">{{ $t('m.eform.formDesign.label.bao-cun-hou-xian-shi') }}</a-select-option>
          </a-select>
        </a-form-item>

      </a-form>
    </template>
  </div>
</template>

<script>

import {randomString} from "../../../utils/util";
import LocaleTag from "../localeProvider/tag/LocaleTag";

export default {
  name: 'LayoutConfig',
  components: {LocaleTag},
  comments: {
    LocaleTag,
  },
  props: ['selectWidget', 'data', 'groupId'],
  data() {
    return {
      dataHeight: 0,
      currentTab: null,
    };
  },
  computed: {
    show() {
      if (this.selectWidget && Object.keys(this.selectWidget).length > 0) {
        return true;
      }
      return false;
    }
  },
  methods: {
    changeNumber(value) {
      if (value === '' || value == null) {
        this.dataHeight = 100;
        this.selectWidget.h = 10;
      } else {
        this.selectWidget.h = this.dataHeight / 10;
      }
    },
    onChangeHeightType(value) {

    },
    clearCurrentTab() {
      const index = this.getTabIndex();
      this.selectWidget.tabs.splice(index, 1, {
        title: 'm.eform.formDesign.label.Tab',
        key: this.selectWidget.selectTab,
      })
    },
    removeCurrentTab() {
      const index = this.getTabIndex();
      this.selectWidget.tabs.splice(index, 1)
    },
    insertTab() {
      const index = this.getTabIndex();
      this.selectWidget.tabs.splice(index, 0, {
        title: 'm.eform.formDesign.label.Tab',
        key: randomString(32),
      })
    },
    getTabIndex() {
      let index = -1;
      this.selectWidget.tabs.find((item, itemIndex) => {
        if (item.key === this.selectWidget.selectTab) {
          index = itemIndex
          return true
        } else {
          return false
        }
      })
      return index
    }
  },
  watch: {
    'selectWidget.h'(val) {
      if ((Object.keys(this.selectWidget).length > 0 && val == null) || val === '') {
        this.selectWidget.h = 10;
      }
      this.dataHeight = this.selectWidget.h * 10;
    },
    'selectWidget.w'(val) {
      if ((Object.keys(this.selectWidget).length > 0 && val == null) || val === '') {
        this.selectWidget.w = 1;
      }
    },
    'selectWidget.selectTab': {
      handler() {
        if (this.selectWidget.type === 'tabs' && this.selectWidget.selectTab) {
          this.currentTab = this.selectWidget.tabs.find(item => item.key === this.selectWidget.selectTab)
        }
      },
      immediate: true
    },
    'selectWidget.tabs': {
      handler() {
        if (this.selectWidget.type === 'tabs' && this.selectWidget.selectTab) {
          this.currentTab = this.selectWidget.tabs.find(item => item.key === this.selectWidget.selectTab)
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .layout-config .ant-form-item {
  margin-bottom: 8px;
}
</style>
